<div class="AppRepository ui form">
    <div class="fields">
        <div class="four wide field">
            <label>{{'deployment_integration_name' | translate}}</label>
            <sui-select class="selection" name="selectIntegration" [(ngModel)]="selectedIntegration" [options]="filteredIntegrations"
                [isSearchable]="true" labelField="name" #selectIntegration>
                <sui-select-option *ngFor="let t of selectIntegration.filteredOptions" [value]="t">
                </sui-select-option>
            </sui-select>
        </div>
        <div class="six wide field">
            <ng-container *ngIf="selectedIntegration?.model">
                <label>{{ 'integration_configuration' | translate }}</label>
                <div class="inline fields" *ngFor="let k of selectedIntegration.model.deployment_default_config | keys">
                    <div class="six wide field">
                        <label>
                            {{k}}
                            <span *ngIf="selectedIntegration.model.deployment_default_config[k].description" suiPopup
                                [popupText]="selectedIntegration.model.deployment_default_config[k].description"
                                popupPlacement="right center">
                                <i class="info circle icon"></i>
                            </span>
                        </label>
                    </div>
                    <div class="ten wide field">
                        <input type="text" [(ngModel)]="selectedIntegration.model.deployment_default_config[k].value"
                            *ngIf="selectedIntegration.model.deployment_default_config[k].type === 'string'">
                        <input type="password" [(ngModel)]="selectedIntegration.model.deployment_default_config[k].value"
                            *ngIf="selectedIntegration.model.deployment_default_config[k].type === 'password'">
                        <textarea class="ui textarea" rows="3" [(ngModel)]="selectedIntegration.model.deployment_default_config[k].value"
                            *ngIf="selectedIntegration.model.deployment_default_config[k].type === 'text'"></textarea>
                    </div>
                </div>
            </ng-container>
        </div>
        <div class="six wide right aligned field">
            <button name="savebtn" class="ui green button" [class.loading]="loadingBtn" type="button" (click)="addIntegration()"
                [disabled]="!selectedIntegration || loadingBtn || application.from_repository">{{ 'btn_add' | translate }}</button>
            <app-warning-modal [title]="_translate.instant('warning_modal_title')" [msg]="_translate.instant('warning_modal_body')"
                (event)="addIntegration()" #linkWarning></app-warning-modal>
        </div>
    </div>
    <div class="fields">
        <div [hidden]="!application.deployment_strategies">
            <ng-container *ngIf="application.deployment_strategies">
                <table class="ui fixed single line celled table">
                    <thead>
                        <tr>
                            <th class="four wide">{{ 'common_name' | translate }}</th>
                            <th class="nine wide">{{ 'integration_configuration' | translate }}</th>
                            <th class="three wide"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let pf of getIntegrationNames()">
                            <td>
                                {{pf}}
                            </td>
                            <td>
                                <div class="inline fields" *ngFor="let k of application.deployment_strategies[pf] | keys">

                                    <div class="six wide field">
                                        <label>
                                            <b>{{k}}</b>
                                            <span *ngIf="application.deployment_strategies[pf][k].description" suiPopup
                                                [popupText]="application.deployment_strategies[pf][k].description"
                                                popupPlacement="right center">
                                                <i class="info circle icon"></i>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="ten wide field">
                                        <input type="text" [(ngModel)]="application.deployment_strategies[pf][k].value"
                                            *ngIf="application.deployment_strategies[pf][k].type === 'string'">
                                        <input type="password" [(ngModel)]="application.deployment_strategies[pf][k].value"
                                            *ngIf="application.deployment_strategies[pf][k].type === 'password'">
                                        <textarea class="ui textarea" rows="3" [(ngModel)]="application.deployment_strategies[pf][k].value"
                                            *ngIf="application.deployment_strategies[pf][k].type === 'text'"></textarea>
                                    </div>
                                </div>
                            </td>
                            <td class="center aligned">
                                <div>
                                    <button class="ui green button mb5" [disabled]="loadingBtn || application.from_repository" [class.loading]="loadingBtn"
                                        type="button" (click)="updateIntegration(pf)">{{ 'btn_save' | translate }}</button>
                                </div>
                                <div>
                                    <app-delete-button (event)="clickDeleteIntegration(pf)" [loading]="loadingBtn" [disabled]="loadingBtn || application.from_repository"></app-delete-button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </ng-container>
        </div>
    </div>
</div>
